<template>
  <div class="container">
    <FormList
        ref="formRef"
        :formList="listData.editAddList"
        :num="24"
        :gutter="24"
        layout="horizontal"
        :btnSpan="18"
        :showResetBtn="false"
        btnTitle="保存"
        :labelCol="4"
        :wrapperCol="18"
        :btnWarpSpan="14"
        :btnWarpOffset="4"
        @Search="editForm"
    />
  </div>
</template>

<script setup>
import {ref} from "vue";
import {getList, edit} from "@/api/system";
import {reactive} from "vue";
import {message} from "ant-design-vue";

const props = defineProps({
  type: String,
});
const formRef = ref();
const state = reactive({
  formData: {},
});
const listData = reactive({
  editAddList: [
    {
      type: "input", //类型
      label: "短信模板", //标签
      name: "sms_temp", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "radio",
      label: "首页分类样式",
      name: "cate_type",
      rules: [{required: true, message: "请选择"}], //规则
      formProps: {}, //form的props
      itemProps: {
        data: [
          {
            id: "1",
            name: "图文",
          },
          {
            id: "2",
            name: "副标题",
          },
          {
            id: "3",
            name: "下划线",
          },
        ],
      }, //item的props
    },
    {
      type: "radio",
      label: "首页商品样式",
      name: "goods_type",
      rules: [{required: true, message: "请选择"}], //规则
      formProps: {}, //form的props
      itemProps: {
        data: [
          {
            id: "1",
            name: "竖铺",
          },
          {
            id: "2",
            name: "瀑布流",
          },
        ],
      }, //item的props
    },
    {
      type: "input", //类型
      label: "分享标题", //标签
      name: "share_title", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "input", //类型
      label: "分享内容", //标签
      name: "share_content", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "img", //类型
      label: "分享图片", //标签
      name: "share_img", //字段
      rules: [{required: true, message: "请选择"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "editor", //类型
      label: "用户协议", //标签
      name: "user_content", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "img", //类型
      label: "社群二维码", //标签
      name: "group_img", //字段
      rules: [{required: true, message: "请选择"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "img", //类型
      label: "分享海报图", //标签
      name: "share_poster", //字段
      rules: [{required: true, message: "请选择"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "input", //类型
      label: "分享海报文字", //标签
      name: "share_font", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "input", //类型
      label: "分享海报名称", //标签
      name: "share_name", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "img", //类型
      label: "首页新人弹框海报图", //标签
      name: "home_img", //字段
      rules: [{required: true, message: "请选择"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "inputNumber", //类型
      label: "新人注册时间", //标签
      name: "newer_day", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "img", //类型
      label: "客服二维码图片", //标签
      name: "contact_img", //字段
      rules: [{required: true, message: "请选择"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "editor", //类型
      label: "新人规则", //标签
      name: "newer_rule", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "imgs", //类型
      label: "新人引导图", //标签
      name: "newer_img", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {
        min: 6,
      }, //item的props
    },
    {
      type: "inputNumber", //类型
      label: "新人总福利个数", //标签
      name: "newer_count", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "img", //类型
      label: "新人步骤图", //标签
      name: "step_img", //字段
      rules: [{required: true, message: "请选择"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "input",
      label: "超级福利邀请新人数量",
      name: "new_user_num", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "editor", //类型
      label: "特价活动规则", //标签
      name: "special_act_rule", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "editor", //类型
      label: "商品膨胀协议", //标签
      name: "expansion_act_rule", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "inputNumber", //类型
      label: "新人3邀请奖励", //标签
      name: "newer_three_gift", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "inputNumber", //类型
      label: "膨胀金每日邀请个数", //标签
      name: "expansion_invite_num", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "editor", //类型
      label: "注销协议", //标签
      name: "logout_rule", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "editor", //类型
      label: "隐私协议", //标签
      name: "privacy_rule", //字段
      rules: [{required: true, message: "请输入"}], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
  ]
});

// 获取列表
const getData = () => {
  getList({
    s_group: props.type,
  }).then((res) => {
    if (res.code === 0) {
      let arr = res.data;
      resetForm(arr);
      state.formData = arr;



      // let list = JSON.parse(JSON.stringify(res.data))
      // for (let i in list) {
      //   if (list[i].s_key === 'cate_type'||list[i].s_key==='goods_type') {
      //     list[i].s_remark = strToObj(list[i].s_remark)
      //   }
      // }
      // list = list.map(item => ({
      //   type: item.type, //类型
      //   label: item.s_name, //标签
      //   name: item.s_key, //字段
      //   rules: [{required: true, message: "请输入"}], //规则
      //   formProps: {},
      //   // itemProps: item.s_remark,
      //   itemProps: '',
      // }))
      // listData.editAddList = list
      // console.log('处理数据---', listData.editAddList)
    }
  });
};
const strToObj = (str) => {
  if (str) {
    let arrOne = str.split('，')
    let arrTwo = []
    let reObj = {data: []}
    arrOne.forEach(item => {
      let obj = {}
      obj.id = item.split('：')[0]
      obj.name = item.split('：')[1]
      arrTwo.push(obj)
    })

    reObj.data = arrTwo
    return reObj
  } else {
    return str
  }
}
const resetForm = (values) => {
  let obj = {};
  values.map((item) => {
    obj[item.s_key] = item.s_value;
  });

  let img = obj.newer_img.split(",");
  formRef.value.resetForm({
    ...obj,
    newer_img:
        img?.map((item) => {
          return {
            url: item,
          };
        }) || [],
  });
};
// 保存
const editForm = (values) => {
  let params = state.formData.map((item) => {
    for (let key in values) {
      if (key === item.s_key) {
        return {
          s_key: key,
          s_value: values[key],
        };
      }
    }
  });
  params.forEach((item) => {
    if (item.s_key === "newer_img") {
      item.s_value = item.s_value.map((ele) => ele.url).join(",");
    }
  });
  edit({
    edit_data: params,
  }).then((res) => {
    if (res.code == 0) {
      message.success(res.msg);
      getData();
    }
  });
};
getData();
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  height: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
</style>